@use '@scss/common' as *;

.wrapper {
  position: fixed;
  top: 0;
  z-index: var(--z-nav);
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  width: 100%;
  transition: color 300ms ease;
  max-width: 100vw;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--theme-bg);
    opacity: 1;
    z-index: -1;
    transition: opacity 500ms ease-out;
  }

  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // backdrop-filter: blur(5px);
    z-index: -1;
    opacity: 1;
    transition: opacity 500ms ease-out;
  }

  @include mobile-header-break {
    &:before,
    &:after {
      transition: opacity 200ms ease;
    }
  }
}

.header.hideBackground {
  &:before {
    opacity: 0;
  }

  &:after {
    opacity: 0;
  }
}

.header.mobileNavOpen {
  z-index: calc(var(--z-nav) + 11);
  border-bottom: 1px solid var(--theme-border-color);

  &:before,
  &:after {
    opacity: 1;
  }
}

.topBar {
  height: var(--top-bar-height);
  opacity: 1;
  overflow: hidden;
  pointer-events: auto;
  transition: height 0.5s ease;
}
